<template>
  <div class="check-publish">
    <head-top head-title="发布查验" hidden='true' go-back="true" publish-all-check="发布" @publishAllCheck="publishAllCheck"></head-top>
    <div class="classfiy">
      <div class="line border-bottom">
        请选择一个类别
      </div>
      <ul class="items clearfix">
        <li v-for="(item,index) in cateInfo" :key="index" class="item" @click="selectPublish(item.id)">
          <span class="title" :class="{'active': pid === item.id}">
          {{item.name}}
          </span>
        </li>
      </ul>
      <!--选中小区电梯出现电梯编号-->
      <div class="lift" v-if="pid === 1" @click="showLiftNum">
        <div class="lift-num">
          <mt-cell title="电梯编号：" is-link :value="liftNum"></mt-cell>
        </div>
      </div>

      <!--选中房屋查验出现房屋信息 测试id：408 正式：1110 -->
      <div v-if="pid === 1110">
        <div class="lift">
          <div class="lift-num" @click="openHouse">
            <mt-cell title="房屋信息：" is-link :value="areaString"></mt-cell>
          </div>
        </div>
        <div class="lift" @click="openHomeNum">
          <div class="lift-num">
            <mt-cell title="房号：" is-link :value="roomString"></mt-cell>
          </div>
        </div>
      </div>
    </div>
    <div class="split"></div>
    <!--其他查验的列表变化-->
    <div class="check-wrapper" v-show="publishList && pid != 1 && pid != 1110">
      <div @click="StartCheck(item.id)" class="last-line" :key="index" v-for="(item,index) in publishList">
        <mt-cell :title="item.name" is-link>
          <span v-show="item.status === 0">开始查验</span>
          <span v-show="item.status === 1" :class="{'no-allready': item.status === 1}">未查验完</span>
          <span v-show="item.status === 2" :class="{'allready': item.status === 2}">已查验完</span>
        </mt-cell>
      </div>
    </div>
    <!--电梯查验后的列表变化-->
    <div class="check-wrapper" v-show="publishList1 && pid === 1">
      <div @click="StartCheck(item.id)" class="last-line" :key="index" v-for="(item,index) in publishList1">
        <mt-cell :title="item.name" is-link>
          <span v-show="item.status === 0">开始查验</span>
          <span v-show="item.status === 1" :class="{'no-allready': item.status === 1}">未查验完</span>
          <span v-show="item.status === 2" :class="{'allready': item.status === 2}">已查验完</span>
        </mt-cell>
      </div>
    </div>
    <!--房屋装修查验后的列表变化-->
    <div class="check-wrapper" v-show="publishList1 && pid === 1110">
      <div @click="StartCheck(item.id)" class="last-line" :key="index" v-for="(item,index) in publishList1">
        <mt-cell :title="item.name" is-link>
          <span v-show="item.status === 0">开始查验</span>
          <span v-show="item.status === 1" :class="{'no-allready': item.status === 1}">未查验完</span>
          <span v-show="item.status === 2" :class="{'allready': item.status === 2}">已查验完</span>
        </mt-cell>
      </div>
    </div>
    <div class="split"></div>
    <div class="text">
      <div class="line border-bottom">
        监理评估汇总
      </div>
      <textarea @keyup="writeContent" @input="writeContent" name="" id="" placeholder="请输入相关的评估汇总..." cols="30" rows="10" v-model="summary"
                maxlength="5000"></textarea>
      <div class="count">
        {{currentCount}}/{{totalCount-currentCount}}
      </div>
    </div>
    <div class="lift-show">
      <mt-popup
        v-model="liftNumShow"
        popup-transition="popup-fade">
        <ul>
          <li v-show="liftNumList.length" class="num border-bottom" v-for="(item,index) in liftNumList" :key="index" @click="selectLiftNum(item)">{{item}}</li>
          <li v-show="!liftNumList.length" class="num border-bottom" style="font-size: 15px; margin-top: 30%">该小区电梯编号数据暂无</li>
        </ul>
      </mt-popup>
    </div>

    <!--房屋弹窗部分-->
    <mt-popup v-model="areaVisible" class="area-class" position="bottom">
      <div class="btn_list">
        <button class="btn_one" @click="cancelBtn()">取消</button>
        <button class="btn_two" @click="sureBtn()">确定</button>
      </div>
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
    <!--房号弹窗部分-->
    <mt-popup
      v-model="roomVisible"
      popup-transition="popup-fade" class="room_popup">
      <ul>
        <li class="other_btn">房号</li>
        <li class="roomnum border-bottom" v-for="(num,index) in roomNumList" :key="index"
            @click="selectRoomNum(num.name, num.id)">{{num.name}}
        </li>
      </ul>
    </mt-popup>

  </div>
</template>

<script>
import headTop from '../header/Header.vue'
import {getCheckPublishCategory, getCheckPublishList, getLiftNum, getLiftCheckData, goPublishAllCheck, getHomeData, getHomeNum} from '../../api/jianli.js'
import {Toast} from 'mint-ui'
import {loadClickData, saveClickData, saveLiftNum, loadLiftNum, saveCyHome, saveCyHomeId, saveRoomId, saveRoomName, loadCyHome, loadRoomId, loadRoomName, loadCyHomeId, loadVillageId} from '../../common/js/cache.js'

let index = 0 // 默认设置二级的index
let index2 = 0 // 默认设置三级的index
let p = [] // 初始化苑
let c = [] // 初始化楼幢
let a = [] // 初始化单元
export default {
  name: 'CheckPublish',
  data() {
    return {
      cateInfo: [],
      publishList: [],
      publishList1: [],
      pid: '',
      active: false,
      totalCount: 5000,
      currentCount: 0,
      summary: '',
      liftNum: '',
      liftNumList: [],
      liftNumShow: false,
      relatedId: '',
      checkStatus: '',
      // 房屋信息
      xiaoquId: loadVillageId(), // 小区id
      areaVisible: false, // 房屋信息联动显示标识
      keepArea: '', // 房屋信息
      lists: [],
      areaString: '请选择房屋信息',
      roomString: '请选择房号',
      did: '', // 单元id
      // 房屋信息联动
      slots: [{
        flex: 1,
        values: p,
        className: 'slot1',
        textAlign: 'center'
      }, {
        divider: true,
        content: '-',
        className: 'slot2'
      }, {
        flex: 1,
        values: c,
        className: 'slot3',
        textAlign: 'center'
      }, {
        divider: true,
        content: '-',
        className: 'slot4'
      }, {
        flex: 1,
        values: a,
        className: 'slot5',
        textAlign: 'center'
      }],
     // 房号数据
      roomNumList: [],
      roomVisible: false, // 房号弹窗显示标识
      fangHao: '' // 房号id
    }
  },
  components: {
    headTop
  },
  created() {
    this.liftNum = loadLiftNum() // 电梯编号
    if (!loadClickData()) {
      saveClickData(1)
    }
    if (!loadCyHome() && !loadRoomName()) {
      this.areaString = '请选择房屋信息'
      this.roomString = '请选择房号'
      this.fangHao = ''
    } else {
      this.areaString = loadCyHome() // 缓存的房屋信息
      this.roomString = loadRoomName() // 缓存的房号
      this.fangHao = loadRoomId() // 房号id
    }
    if (loadLiftNum() != undefined) {
      // 类别为：小区电梯1 房屋精装修 1110
      if (loadClickData() === 1) {
        getLiftCheckData(1, loadLiftNum(), 0).then(res => {
          this.publishList1 = res.data.data
          this.summary = res.data.summary
          this.currentCount = this.summary.length
          this.checkStatus = res.data.status
          this.pid = res.data.id
          this.relatedId = res.data.related_id
        })
      } else if (loadClickData() === 1110) {
        getLiftCheckData(1110, 0, loadRoomId()).then(res => {
          this.publishList1 = res.data.data
          this.summary = res.data.summary
          this.currentCount = this.summary.length
          this.checkStatus = res.data.status
          this.pid = res.data.id
          this.relatedId = res.data.related_id
        })
      } else {
        // 除了电梯和装修其他类别的查验列表
        this._getCheckPublishList(loadClickData() || 1)
      }
    } else {
      this._getCheckPublishList(loadClickData() || 1)
    }
    this._getCheckPublishCategory()
    this._getHomeData(this.xiaoquId) // 房屋信息数据
    this._getHomeNum(loadCyHomeId()) // 房号数据
  },
  methods: {
    // 点击开始查验时，先判断电梯编号是否已填
    StartCheck(id) {
      if (this.pid === 1 && !this.liftNum) {
        Toast({
          message: '电梯编号必填',
          position: 'middle',
          duration: 1000
        })
        this.liftNum = 0
        return
      }
      if (!this.liftNum) {
        this.liftNum = 0
      }
      if (this.pid != 1) {
        this.liftNum = 0
      }
      if (this.pid === 1110 && !this.fangHao) {
        Toast({
          message: '房屋信息和房号必选',
          position: 'middle',
          duration: 1000
        })
        this.areaString = '请选择房屋信息'
        this.roomString = '请选择房号'
        return
      }
      this.$router.push(`/StartCheck/${id}/${this.liftNum}`)
    },
    // 字体有没有超过预定值
    writeContent() {
      this.currentCount = this.summary.length
      let remainCount = this.totalCount - this.currentCount
      if (!remainCount) {
        Toast({
          message: '字数不能超过5000',
          position: 'middle',
          duration: 1000
        })
      }
    },
    // 获取发布的类别
    _getCheckPublishCategory() {
      getCheckPublishCategory().then(res => {
        if (res.code === 200) {
          this.cateInfo = res.data
        }
      })
    },
    // 通过获取到的类别id获取对应的查验列表
    _getCheckPublishList(id) {
      getCheckPublishList(id, this.liftNum).then(res => {
        if (res.code === 200) {
          this.pid = res.data.id
          this.publishList = res.data.data
          this.summary = res.data.summary
          this.currentCount = this.summary.length
          this.checkStatus = res.data.status
          this.relatedId = res.data.related_id
        }
      })
    },
    selectPublish(id) {
      // 缓存选中的类别id
      saveClickData(id)
      if (id != 1 && id != 1110) {
        this.liftNum = 0
        this.areaString = '请选择房屋信息' // 房屋信息
        this.roomString = '请选择房号' // 房号name
        this.fangHao = '' // 房屋id
        this.summary = ''
        this.currentCount = this.summary.length
        this._getCheckPublishList(id) // 通过选中的id获取对应的查验列表
      } else {
        this.liftNum = loadLiftNum() // 电梯编号
        this.areaString = loadCyHome() // 房屋信息
        this.roomString = loadRoomName() // 房号name
        this.fangHao = loadRoomId() // 房号id
        this.summary = ''
        // 通过电梯编号获取查验内容
        if (id === 1) {
          getLiftCheckData(1, loadLiftNum() || 0, 0).then(res => {
            this.publishList1 = res.data.data
            this.summary = res.data.summary
            this.currentCount = this.summary.length
            this.pid = res.data.id
            this.checkStatus = res.data.status
            this.relatedId = res.data.related_id
          })
        }
        // 通过房号获取查验内容
        if (id === 1110) {
          getLiftCheckData(1110, 0, loadRoomId()).then(res => {
            this.publishList1 = res.data.data
            this.summary = res.data.summary
            this.currentCount = this.summary.length
            this.pid = res.data.id
            this.checkStatus = res.data.status
            this.relatedId = res.data.related_id
          })
        }
      }
    },
    // 显示点击电梯编号后弹出电梯编号
    showLiftNum() {
      getLiftNum().then(res => {
        if (res.code === 200) {
          this.liftNumList = res.data
          this.liftNumShow = true
        } else {
          alert('获取数据失败')
        }
      })
    },
    // 选择电梯编号去请求电梯的查验状态
    selectLiftNum(item) {
      this.liftNumShow = false
      this.liftNum = item
      saveLiftNum(this.liftNum)
      getLiftCheckData(1, item, 0).then(res => {
        this.publishList1 = res.data.data
        this.summary = res.data.summary
        this.currentCount = this.summary.length
        this.checkStatus = res.data.status
      })
    },
    // 发布
    publishAllCheck() {
      // 电梯
      if (loadClickData() === 1) {
        if (this.liftNum === undefined) {
          Toast({
            message: '电梯编号必填',
            position: 'middle',
            duration: 1000
          })
          return
        }
        if (this.checkStatus === 0) {
          Toast({
            message: '你还未开始查验',
            position: 'middle',
            duration: 1000
          })
          return
        }
        goPublishAllCheck(this.pid, this.liftNum, this.summary, 0).then(res => {
          if (res.code === 200) {
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 1000
            })
            history.replaceState({}, '', '/CheckPublish')
            this.$router.push(`/CheckDetail/${this.relatedId}`)
          } else {
            Toast({
              message: '发布失败，退出重试',
              position: 'middle',
              duration: 1000
            })
          }
        })
      }
      // 房屋装修【id= 408】
      if (loadClickData() === 1110) {
        if (this.fangHao === '') {
          Toast({
            message: '房屋信息必选',
            position: 'middle',
            duration: 1000
          })
          return
        }
        if (this.checkStatus === 0) {
          Toast({
            message: '你还未开始查验',
            position: 'middle',
            duration: 1000
          })
          return
        }
        goPublishAllCheck(this.pid, 0, this.summary, this.fangHao).then(res => {
          if (res.code === 200) {
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 1000
            })
            history.replaceState({}, '', '/CheckPublish')
            this.$router.push(`/CheckDetail/${this.relatedId}`)
          } else {
            Toast({
              message: '发布失败，退出重试',
              position: 'middle',
              duration: 1000
            })
          }
        })
      }
      // 普通查验(去掉电梯和房屋装修)
      if (loadClickData() !== 1 && loadClickData() !== 1110) {
        if (this.checkStatus === 0) {
          Toast({
            message: '你还未开始查验',
            position: 'middle',
            duration: 1000
          })
          return
        }
        goPublishAllCheck(this.pid, 0, this.summary, 0).then(res => {
          if (res.code === 200) {
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 1000
            })
            history.replaceState({}, '', '/CheckPublish')
            this.$router.push(`/CheckDetail/${this.relatedId}`)
          } else {
            Toast({
              message: '发布失败，退出重试',
              position: 'middle',
              duration: 1000
            })
          }
        })
      }
    },
    // 房屋信息（点击房屋查验后出现房屋信息时点击获取房屋信息）
    openHouse () {
      // 打开房屋信息联动
      this.areaVisible = true
      this._getHomeData(this.xiaoquId)
    },
    // 房屋信息接口数据获取
    _getHomeData(id) {
      // 清空数组的所有元素，防止缓存之前数组的元素
      p.splice(0, p.length)
      c.splice(0, c.length)
      a.splice(0, a.length)
      // 小区房屋信息接口
      getHomeData(id).then(res => {
        if (res.code === 200) {
          this.lists = res.data
          // console.log(this.lists)
          this.lists.map(res => {
            // 判断小区是否有苑时的显示方式
            if (res.name === this.village) {
              p.push(res.name) // 苑
            } else {
              p.push(res.name + '苑')
            }
          })
          this.lists.map(res => {
            res.children.map(res => {
              c.push(res.name) // 楼幢
            })
          })
          this.lists.map(res => {
            res.children.map(res => {
              a.push(res.name) // 单元
            })
          })
        }
        if (res.code === 400) {
          // Toast({
          //   message: res.error,
          //   position: 'middle',
          //   duration: 2000
          // })
          this.areaString = '请选择房屋信息'
          this.roomString = '请选择房号'
        }
      })
    },
    // 房屋信息滑块弹窗内容
    onValuesChange (picker, values) {
      let one = values[0]
      let two = values[1]
      // let three = values[2]
      index = p.indexOf(one) // 苑
      if (index >= 0 && p.length > 0) {
        c = this.lists[index].children.map(res => { // 楼幢
          return res.name + '幢'
        })
        picker.setSlotValues(1, c)
        two = values[1]
      }
      index2 = c.indexOf(two) // 单元
      if (index2 >= 0 && c.length > 0) {
        a = this.lists[index].children[index2].children.map(res => {
          return [res.name, res.id] // 单元名,单元id
        })
        let newarea = []
        for (var i = 0; i < Object.values(a).length; i++) {
          // 单元的数组
          newarea.push(Object.values(a)[i][0])
          if (values[2] === Object.values(a)[i][0]) {
            this.did = Object.values(a)[i][1] // 单元的id
          }
        }
        picker.setSlotValues(2, newarea)
        // three = values[2]
      }
      this.keepArea = values.join('-') + '单元' // 拼接字符串（选中好的值以-连接）
      // console.log(this.keepArea)
    },
    // 房屋信息弹窗取消按钮
    cancelBtn () {
      this.areaVisible = false
    },
    // 房屋信息弹窗确定按钮
    sureBtn () {
      this.areaString = this.keepArea
      // 缓存房屋信息
      saveCyHome(this.areaString)
      this.areaVisible = false
      // 房号数据请求
      saveCyHomeId(this.did) // 缓存房屋信息id（单元id）
      this._getHomeNum(this.did)
      // console.log(this.did)
    },
    // 根据房屋信息获取房号
    _getHomeNum (id) {
      getHomeNum(id).then(res => {
        if (res.code === 200) {
          this.roomNumList = res.data
          // console.log(this.roomNumList)
        }
      })
    },
    // 房号
    openHomeNum () {
      // 先有房屋信息后才能有房号
      if (p.length === 0) {
        this.areaString = '请选择房屋信息'
        this.roomString = '请选择房号'
        this.fangHao = ''
        saveRoomId(this.fangHao)
        Toast({
          message: '请先选择房屋信息',
          position: 'middle',
          duration: 2000
        })
        return
      }
      if (!this.roomNumList) {
        this.roomVisible = false
        this.areaString = '请选择房屋信息'
        this.roomString = '请选择房号'
        this.fangHao = ''
        saveRoomId(this.fangHao)
        Toast({
          message: '请先选择房屋信息',
          position: 'middle',
          duration: 2000
        })
        return
      }
      this.roomVisible = true
    },
    // 点击选择房屋列表的某一个房号
    selectRoomNum (num, id) {
      this.roomVisible = false
      this.roomNum = num // 房号
      this.roomString = this.roomNum
      // 缓存房号name
      saveRoomName(num)
      this.fangHao = id // 房号id
      // 缓存房号id
      saveRoomId(this.fangHao)
      // console.log(id)
      // 选择房号后去请求查验状态
      getLiftCheckData(1110, 0, this.fangHao).then(res => {
        this.publishList1 = res.data.data
        this.summary = res.data.summary
        this.currentCount = this.summary.length
        this.checkStatus = res.data.status
      })
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
@import '../../common/sass/mixin.scss';
  .check-publish{
    padding-top: 40px;
    .lift{
      .lift-num{
        .mint-cell:last-child{
          background-size: 100% 0px;
        }
        .mint-cell-wrapper{
          background-size: 100% 0px;
        }
      }
    }
    .lift-show{
      .mint-popup {
        width: 60%;
        height: 30%;
        border-radius: 4px;
        overflow: auto;
        .num {
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
    }
    input{
      outline: none;
      border: none;
      color: #666;
      font-size: 14px;
    }
    .project-name{
      margin: 0 10px;
      height: 44px;
      line-height: 44px;
      span{
        font-size: 15px;
      }
    }
    .mint-cell{
      min-height: 44px;
    }
    .check-wrapper{
      .allready {
        color: #666;
      }
      .no-allready {
        color: red;
      }
      a{
        display: block;
        color: #000;
      }
      .mint-cell{
        min-height: 44px;
        &:last-child{
          background-size: 100% 0px;
          .mint-cell-wrapper{
          // background-size: 100% 0px;
        }
      }
      .mint-cell-wrapper{
        background-position: bottom left;
        background-size: 100% 1px;
      }
      .mint-cell-value.is-link {
        margin-right: 12px;
        color: #0078de;
        font-size: 12px;
      }
    }
    .last-line {
        &:last-child{
          .mint-cell{
            .mint-cell-wrapper{
              background-size: 100% 0px;
              // background-color: hotpink;
            }
          }
        }
      }
    }
    .text {
      padding: 10px;
      position: relative;
      .line {
        height: 20px;
        line-height: 20px;
        margin-bottom: 10px;
      }
      textarea {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        height: 150px;
        background: #f2f2f2;
        border-radius: 7px;
        resize: none;
        outline: none;
        border: none;
        font-size: 12px;
        line-height: 16px;
      }
      .count {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #0078de;
      }
    }
    .split{
      width: 100%;
      height: 10px;
      background-color: #f2f2f2;
    }
    .classfiy {
      padding: 0 10px;
      .lift{
        height: 44px;
        line-height: 44px;
        span{
          font-size: 15px;
        }
      }
      .line{
        height: 30px;
        line-height: 30px;
        padding-left: 8px;
      }
      .items{
        .item{
          float: left;
          width: 25%;
          height: 30px;
          line-height: 30px;
          margin:7px 0px;
          text-align: center;
          .title{
            width: 82%;
            display: inline-block;
            border: 1px solid #d9d9d9;
            // padding: 8px 10px;
            border-radius: 3px;
            color: #292929;
          }
          .active{
            border: 1px solid #0078de;
            color: #0078de;
          }
        }
      }
    }
    .area-class {
      width: 100%;
      height: 40%;
      .btn_list {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #f2f2f2;
        .btn_one, .btn_two {
          width: 120px;
          height: 39px;
          background: #fff;
          outline: none;
          border: none;
          font-size: 15px;
        }
        .btn_one {
          float: left;
        }
        .btn_two {
          float: right;
          color: #007aff;
        }
      }
    }
    .room_popup {
      width: 60%;
      height: 30%;
      border-radius: 4px;
      overflow: auto;
      .other_btn {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #d7d7d7;
        font-size: 15px;
      }
      .roomnum {
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
</style>
